BootstrapVue — Checkboxes and Data Lists

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to create more checkboxes and data lists with BootstrapVue.

Datalists

We can add a datalist element which lets us create a native autocomplete input.

To add it, we can use the b-form-datalist component.

For example, we can write:

<template>
  <div id="app">
    <label for="fruit">fruit</label>
    <b-form-input list="fruit-list" id="fruit"></b-form-input>
    <b-form-datalist id="fruit-list" :options="options"></b-form-datalist>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
     options: ['apple', 'orange', 'grape']
    };
  },
};
</script>

We have a b-form-input which provides us with an input text box.

Then we have the b-form-datalist to add a autocomplete list where we can choose the items listed in the options array.

We add the options prop to b-form-datalist to set the options available.

The id value of b-form-datalist has to be the same as the list attribute value in b-form-input so that the b-form-datalist will be used for populating the options.

Checkbox

To add a checkbox to a form, we can use the b-form-checkbox component.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="status" name="checkbox" value="yes" unchecked-value="no">accept?</b-form-checkbox>

    <div>
      State:
      {{ status }}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      status: ""
    };
  }
};
</script>

We have the b-form-checkbox component.

It has the v-model directive to bind the value to the state we want.

Also, we set the value prop to set the value of the status model if the checkbox is checked.

Likewise, we have the unchecked-value to set the value of the status model if the checkbox is unchecked.

Then when we toggle the checkbox between checked and unchecked, we see the text below toggle between ‘yes’ or ‘no’.

Multiple Choice Checkboxes

We can create mulitiple checkboxes with the b-form-checkbox-group component.

For instance, we can write the following code to create one:

<template>
  <div id="app">
    <b-form-group label="fruits">
      <b-form-checkbox-group v-model="selected" :options="options" name="fruits"></b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: ["apple", "orange", "grape"],
      selected: []
    };
  }
};
</script>

The label prop has the label content.

We have the selected state for holding the selected values. It must be an array.

The options array for rendering the checkboxes with the given options.

Now when we click the checkboxes, we see the selected items.

Equivalently, we can use the b-form-checkbox-group with the b-form-checkbox for more flexibility.

For instance, we can write:

<template>
  <div id="app">
    <b-form-group label="fruit:">
      <b-form-checkbox-group id="friots" v-model="selected" name="fruits">
        <b-form-checkbox value="orange">orange</b-form-checkbox>
        <b-form-checkbox value="apple">apple</b-form-checkbox>
        <b-form-checkbox value="grape">grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: []
    };
  }
};
</script>

We added b-form-checkbox components instead of using the options prop to render checkboxes.

The value prop has the value that’ll be set if we check a checkbox.

Therefore, we get the same result as the previous example.

Options Array

Each entry of the options array can have up to 3 properties.

It can have the text , value , and disabled properties.

For instance, we can write:

<template>
  <div id="app">
    <b-form-group label="fruits">
      <b-form-checkbox-group v-model="selected" :options="options" name="fruits"></b-form-checkbox-group>
    </b-form-group>
    <div>{{ selected }}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      options: [
        { text: "orange", value: "orange", disabled: false },
        { text: "apple", value: "apple", disabled: false },
        { text: "grape", value: { grape: "grape" }, disabled: true }
      ],
      selected: []
    };
  }
};
</script>

Instead of an array of strings, we have an array of objects with the text , value , and disabled properties.

If disabled is true , then the checkbox would be disabled.

The value property can have anything. It’s the value that’ll be in the selected array if we check the checkbox.

Conclusion

We can create checkboxes with the b-form-checkbox and associated components.

It’s very flexible, we can change the value and text to whatever we want.

Also, we can choose to enable or disabled checkboxes

Datalists let us create a simple autocomplete input.